﻿@model HotelRegistrationSystem.DAL.Hotel

@{
    ViewBag.Title = "Details";
}

@Styles.Render("~/Content/themes/start/css")

<h2>@Html.DisplayFor(model => model.Name)</h2>

<div class="row">
    <div class="six columns">
        @{        
            var pic = Model.HotelsRoomsPictures.FirstOrDefault();
            string picturePath = pic != null ?
            string.Format("/Pictures_Hotels/{0}", pic.PictureName) :
                "~/Content/images/prod_large.jpg";
        }
        <img src="@picturePath"
             onerror="this.src = '/Content/images/prod_large.jpg'"/>
    </div>

    <div class="six columns">
        <div class="panel">
            <div class="center_book_btn">
                <p>
                    @Html.ActionLink("Book a room", "RoomBooking", new { hotelId = Model.HotelId },
                        new { @class = "button small radius" })
                </p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="twelve columns">

        <dl class="tabs four-up">
            <dd class="active">
                <a href="#hotel-rooms">Rooms</a>
            </dd>
            <dd>
                <a href="#hotel-overview">Overview</a>
            </dd>
            <dd>
                <a href="#hotel-description">Description</a>
            </dd>
            <dd>
                <a href="#customer-reviews">Customer Reviews</a>
            </dd>
        </dl>

        <ul class="tabs-content">
            <li id="hotel-overview">
                <div class="row">
                    <div class="six columns">
                        <p>
                            <strong>Address:</strong>
                            @Html.DisplayFor(model => model.Address.Country), 
                            @Html.DisplayFor(model => model.Address.City), 
                            @Html.DisplayFor(model => model.Address.Street)
                        </p>
                        <p>
                            <strong>Owner:</strong>
                            @Html.DisplayFor(model => model.User.UserName)
                        </p>
                        <p>
                            <strong>@Html.DisplayNameFor(model => model.PhoneNumber):</strong>
                            @Html.DisplayFor(model => model.PhoneNumber)
                        </p>
                        <p>
                            <strong>@Html.DisplayNameFor(model => model.Email):</strong>
                            @Html.DisplayFor(model => model.Email)
                        </p>
                        <p>
                            <strong>Payment:</strong>
                            @Html.DisplayFor(model => model.ReservationType.Type)
                        </p>
                        <p>
                            <strong>Rating:</strong>
                            @ViewBag.HotelRating
                            @if (User.Identity.IsAuthenticated && 
                                HotelRegistrationSystem.DAL.HotelDAL.CanEvaluateHotel(Model.HotelId, User.Identity.Name))
                            {  
                            
                                using (Html.BeginForm(new { id = Model.HotelId }))
                                {
                                    <span>
                                        <select id="ddlMarks" name="ddlMarks" class="eval_droplist">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                            <option>7</option>
                                            <option>8</option>
                                            <option>9</option>
                                            <option>10</option>
                                        </select>
                                        <input id="submit_form" class="button small radius" type="submit" value="Evaluate" />
                                    </span>
                                }
                            }
                        </p>
                    </div>
                </div>
            </li>
            <li id="hotel-description">
                <div class="row">
                    <div class="twelve columns">
                        @Html.DisplayFor(model => model.Description)
                    </div>
                </div>
            </li>
            <li id="customer-reviews"></li>
            <li class="active" id="hotel-rooms">

                @if (ViewBag.InitialDate != null)
                {
                    <input type="hidden" id="datePickerId" value="@Html.ViewBag.InitialDate"/>
                }

                <div style="float: right; width: 100px;">
                    <a href="#hotel-rooms" id="nextWeek">Next Week >>></a>
                </div>
                <div style="float: right; width: 150px;">
                    <a href="#hotel-rooms" id="previousWeek"><<< Previous Week</a>
                </div>

                <br />
                <br />

                <div id="rooms_partial_view">
                </div>

            </li>
        </ul>

    </div>
</div>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryui")
    <script>
        $(function () {

            $(".tabs.four-up dd").click(
                function () {
                    $(".tabs.four-up > .active").removeClass("active");
                    $(this).addClass("active");
                    $(".tabs-content > li.active").removeClass("active");
                    var contentSelector = $(this).find("a").attr("href");
                    $(".tabs-content > li" + contentSelector).addClass("active");
                }
            );
        }
        );

        function checkReservation() {
            var urlToCall = "@Html.Raw(@Url.Action("SaveReservationFormStatus"))";
            $.ajax({
                url: urlToCall,
                data: $('#reservationForm').serialize(),
                type: 'POST',
                success: function (data) {
                    var urlToCall = "@Html.Raw(@Url.Action("CheckReservation"))";
                    $.ajax({
                        url: urlToCall,
                        data: $('#reservationForm').serialize(),
                        type: 'POST',
                        success: function (data) {
                            {
                                if (data.indexOf("Err") != -1) {
                                    $('#errorMessage p').empty().append(data.toString().replace("Err: ",""));
                                }
                                else if (data == "ok") {
                                    document.getElementById('reservationForm').submit();
                                }
                            }
                        },
                        async: false
                    });
                }
            });
        }

        function updateRoomsData() {
            var urlToCall = "@Html.Raw(@Url.Action("SaveReservationFormStatus"))";
            $.ajax({
                url: urlToCall,
                data: $('#reservationForm').serialize(),
                type: 'POST',
                success: function (data) {

                    var urlToCall = "@Html.Raw(@Url.Action("LoadReservationView", new {id = Model.HotelId, date = "_DATETOREPLACE_"}))";
                    urlToCall = urlToCall.replace('_DATETOREPLACE_', (lastDate.getMonth() + 1) + "-" + lastDate.getDate() + "-" + lastDate.getFullYear());
                    $.ajax({
                        url: urlToCall,
                        datatype: 'html',
                        success: function (data) {
                            { success_cb(data); }
                        }
                    });
                }
            });
        }

        var lastDate;
        var viewedRoomType = [-1];
        function initializeNextWeekButton() {

            $("#nextWeek").click(
                function () {
                    lastDate.setDate(lastDate.getDate() + 7);
                    updateRoomsView();
                }
            );
        };

        function initializePreviousWeekButton() {

            $("#previousWeek").click(
                function () {
                    lastDate.setDate(lastDate.getDate() - 7);
                    updateRoomsView();
                }
            );
        };

        var datepickerstartdate;
        function initializeDatePicker() {
            var mindatepickerstartdate = new Date();
            mindatepickerstartdate.setDate(mindatepickerstartdate.getDate() + 1);
            $(".datepickerstart").datepicker({
                onSelect: function (value, date) {
                    datepickerstartdate = new Date(date.currentYear, date.currentMonth, date.currentDay, 0, 0, 0, 0);
                    lastDate = new Date(date.currentYear, date.currentMonth, date.currentDay, 0, 0, 0, 0);
                    updateRoomsView();
                },
                dateFormat: "dd MM yy",
                minDate: mindatepickerstartdate
            });
            $(".datepickerstart").datepicker('setDate', datepickerstartdate);
        };

        var datepickerenddate;
        function initializeEndDatePicker() {
            var mindatepickerenddate = new Date();
            mindatepickerenddate.setDate(mindatepickerenddate.getDate() + 2);
            $(".datepickerend").datepicker({
                onSelect: function (value, date) {
                    datepickerenddate = new Date(date.currentYear, date.currentMonth, date.currentDay, 0, 0, 0, 0);
                },
                dateFormat: "dd MM yy",
                minDate: mindatepickerenddate
            });
            $(".datepickerend").datepicker('setDate', datepickerenddate);
        };

        function changeDates(myDate, elementToUpdate) {
            var myTable = document.getElementById(elementToUpdate).firstElementChild;
            var startCell = 4;
            var countDays = 7;
            var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];

            for (var i = startCell; i < startCell + countDays; i++) {
                var curr_date = myDate.getDate();
                var curr_month = myDate.getMonth(); //Months are zero based
                var curr_year = myDate.getFullYear();
                myTable.rows[0].cells[i].innerHTML = curr_date + " " + monthNames[curr_month] + " " + curr_year;
                myDate.setDate(myDate.getDate() + 1);
            }
        };

        function updateRoomsView() {
            updateRoomsData();
        };

        function success_cb(data) {
            $('#rooms_partial_view').empty().html(data);
            initializeAccordion();
            initializeAccordionClick();
            initializeDatePicker();
            initializeEndDatePicker();
            $("ul.accordion > li").each(
                function () {
                    changeDates(new Date(lastDate), 'roomsPartialView_' + $(this).attr("id"));
                }
            )
        }

        $(function () {
            var startDateValue;
            if (document.getElementById("datePickerId") != null &&
                document.getElementById("datePickerId").value != null) {
                startDateValue = new Date(document.getElementById("datePickerId").value);
            }
            else {
                startDateValue = new Date();
            }
            lastDate = startDateValue;
            lastDate.setDate(lastDate.getDate() + 1);

            var urlToCall = "@Html.Raw(@Url.Action("LoadReservationView", new {id = Model.HotelId, date = "_DATETOREPLACE_"}))";
            urlToCall = urlToCall.replace('_DATETOREPLACE_', (lastDate.getMonth() + 1) + "-" + lastDate.getDate() + "-" + lastDate.getFullYear());
            $.ajax({
                url: urlToCall,
                datatype: 'html',
                success: function (data) {
                    {
                        $('#rooms_partial_view').empty().html(data);
                        updateRoomsView();
                        datepickerstartdate = new Date(lastDate.valueOf());
                        initializeDatePicker();
                        datepickerenddate = new Date(lastDate.valueOf());
                        datepickerenddate.setDate(datepickerenddate.getDate() + 1);
                        initializeEndDatePicker();
                        initializeNextWeekButton();
                        initializePreviousWeekButton();
                    }
                }
            });
        });

        function initializeAccordion() {

            if (viewedRoomType.length == 1 && viewedRoomType[0] == -1) {
                $('ul.accordion li').first().addClass('active');
                viewedRoomType.push($('ul.accordion li').first()[0].id);
            }
            for (var i = 1; i < viewedRoomType.length; i++) {
                $('ul.accordion #' + viewedRoomType[i]).addClass('active');
            }
        };

        function initializeAccordionClick() {
            $('.accordion li > .title').click(
                function () {
                    var flyout = $(this).parent().children('.content').first();
                    if (flyout.parent('li')[0].className == 'active') {
                        flyout.hide().parent('li').removeClass('active');
                        for (var i = 0; i < viewedRoomType.length; i++) {
                            if (viewedRoomType[i] == flyout.parent('li')[0].id) {
                                viewedRoomType.splice(i, 1);
                                break;
                            }
                        }
                    }
                    else {
                        flyout.show(0, function () {
                            flyout.parent('li').addClass('active');
                            viewedRoomType.push(flyout.parent('li')[0].id);
                        });
                    }
                });
        };
        // Post hotel evaluation by ajax and recieve by json new hotel rating and add it to display


    </script>
}